<template>
  <div class="onebox">
    <div class="main">
      <div class="bt">法院公告</div>
      <div class="list_box">
        <div class="list">
          <div class="title" @click="handleShow(1)">该公司被起诉的法院公告(<span
              style="color:red">{{announcementBeProsecute.length}}</span>)</div>
          <div class="table" v-if="courtShow">
            <el-table :data="announcementBeProsecute" style="width: 100%" border>
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="date" label="刊登日期" width="180"></el-table-column>
              <el-table-column prop="caseNo" label="案号" width="180"></el-table-column>
              <el-table-column prop="caseReason" label="案由"></el-table-column>
              <el-table-column prop="name" label="案件身份" width="180">
                <template slot-scope="scope">
                  <p>原告 - {{scope.row.caseIdentityOne}}</p>
                  <p>被告 - <span style="color:#1890ff">{{scope.row.caseIdentityTwo}}</span></p>
                </template>
              </el-table-column>
              <el-table-column prop="announcementType" label="公告类型" width="180"></el-table-column>
              <el-table-column prop="court" label="法院" width="180"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="list">
          <div class="title" @click="handleShow(2)">该公司起诉他人或公司的法院公告(<span
              style="color:red">{{announcementProsecute.length}}</span>)</div>
          <div class="table" v-if="courtShowOne">
            <el-table :data="announcementProsecute" style="width: 100%" border>
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="date" label="刊登日期" width="180"></el-table-column>
              <el-table-column prop="caseNo" label="案号" width="180"></el-table-column>
              <el-table-column prop="caseReason" label="案由"></el-table-column>
              <el-table-column prop="name" label="案件身份">
                <template slot-scope="scope">
                  <p>原告 - {{scope.row.caseIdentityOne}}</p>
                  <p>被告 - <span style="color:#1890ff">{{scope.row.caseIdentityTwo}}</span></p>
                </template>
              </el-table-column>
              <el-table-column prop="announcementType" label="公告类型" width="180"></el-table-column>
              <el-table-column prop="court" label="法院" width="180"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="bt">立案信息</div>
      <div class="list_box">
        <div class="list">
          <div class="title" @click="handleShow(3)">该公司被起诉的立案信息(<span
              style="color:red">{{registerBeProsecute.length}}</span>)</div>
          <div class="table" v-if="recordShow">
            <el-table :data="registerBeProsecute" style="width: 100%" border>
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="date" label="立案日期" width="180"></el-table-column>
              <el-table-column prop="caseNo" label="案号" width="180"></el-table-column>
              <el-table-column prop="name" label="案件身份">
                <template slot-scope="scope">
                  <p>上诉人 - <span style="color:#1890ff">{{scope.row.caseIdentityOne}}</span></p>
                  <p>被上诉人 - <span style="color:#1890ff">{{scope.row.caseIdentityTwo}}</span></p>
                </template>
              </el-table-column>
              <el-table-column prop="court" label="法院" width="180"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="list">
          <div class="title" @click="handleShow(4)">该公司起诉他人或公司的立案信息(<span
              style="color:red">{{registerProsecute.length}}</span>)</div>
          <div class="table" v-if="recordShowOne">
            <el-table :data="registerProsecute" style="width: 100%" border>
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="date" label="立案日期" width="180"></el-table-column>
              <el-table-column prop="caseNo" label="案号" width="180"></el-table-column>
              <el-table-column prop="name" label="案件身份">
                <template slot-scope="scope">
                  <p>上诉人 - <span style="color:#1890ff">{{scope.row.caseIdentityOne}}</span></p>
                  <p>被上诉人 - <span style="color:#1890ff">{{scope.row.caseIdentityTwo}}</span></p>
                </template>
              </el-table-column>
              <el-table-column prop="court" label="法院" width="180"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="bt">被执行人</div>
      <div class="list_box">
        <div class="list">
          <div class="title" @click="handleShow(5)">该公司曾因未按时履行法律义务而被法院强制执行(<span
              style="color:red">{{enforcement.length}}</span>)</div>
          <div class="table" v-if="executorShow">
            <el-table :data="enforcement" style="width: 100%" border>
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="date" label="立案日期" width="180"></el-table-column>
              <el-table-column prop="execute" label="执行标的" width="180"></el-table-column>
              <el-table-column prop="caseNo" label="案号" width="180"></el-table-column>
              <el-table-column prop="court" label="执行法院" width="180"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="bt">行政处罚</div>
      <div class="list_box">
        <div class="list">
          <div class="title" @click="handleShow(6)">该公司曾因未按时履行法律义务而被法院强制执行(<span
              style="color:red">{{administrative.length}}</span>)</div>
          <div class="table" v-if="administrativeShow">
            <el-table :data="enforcement" style="width: 100%" border>
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="date" label="处罚日期" width="180"></el-table-column>
              <el-table-column prop="documentNo" label="决定文书号" width="180"></el-table-column>
              <el-table-column prop="punishCause" label="处罚事由/违法行为类型" width="180"></el-table-column>
              <el-table-column prop="punishResult" label="处罚结果/内容" width="180"></el-table-column>
              <el-table-column prop="punishUnit" label="处罚单位" width="180"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  // components
  import Loading from '@/components/Loading/index'
  import handlePageMixin from "@/mixins/handlePageMixin";

  // api
  import {
    judicialRisk,
  } from '@/api/warningComplaint'
  import {
    string
  } from 'jszip/lib/support';

  export default {
    components: {

    },
    props: {
      merchantId: string
    },
    mixins: [handlePageMixin],
    data() {
      return {
        loading: false,
        courtShow: false,
        courtShowOne: false,
        recordShow: false,
        recordShowOne: false,
        executorShow: false,
        administrativeShow: false,
        announcementBeProsecute: [], //法律公告被起诉
        announcementProsecute: [], //法律公告起诉他人
        registerBeProsecute: [], //立案被起诉
        registerProsecute: [], //立案起诉他人
        enforcement: [], //被执行人
        administrative: [], //行政处罚
        courtColumn: [{
            prop: "id",
            label: "刊登日期",
            width: 120
          },
          {
            prop: "type",
            label: "案号",
            width: 120
          },
          {
            prop: "content",
            label: "案由",
            width: 220
          },
          {
            prop: "merchantName",
            label: "案件身份"
          },
          {
            prop: "shopName",
            label: "公告类型",
            width: 200
          },
          {
            prop: "createTime",
            label: "法院",
            width: 220
          },
        ],
      }
    },
    computed: {

    },
    updated() {

    },
    created() {
      this.getList()
    },
    methods: {
      handleChange(val) {
        console.log(val);
      },
      handleShow(data) {
        if (data == 1) {
          this.courtShow = !this.courtShow
        } else if (data == 2) {
          this.courtShowOne = !this.courtShowOne
        } else if (data == 3) {
          this.recordShow = !this.recordShow
        } else if (data == 4) {
          this.recordShowOne = !this.recordShowOne
        } else if (data == 5) {
          this.executorShow = !this.executorShow
        } else if (data == 6) {
          this.administrativeShow = !this.administrativeShow
        }
      },
      //列表
      getList() {
        var merchantId = this.merchantId
        this.loading = true;
        judicialRisk(merchantId)
          .then((res) => {
            const {
              administrative,
              announcementBeProsecute,
              announcementProsecute,
              enforcement,
              registerBeProsecute,
              registerProsecute
            } = res.result;
            console.log('列表', res.result)
            this.administrative = administrative
            this.announcementBeProsecute = announcementBeProsecute
            this.announcementProsecute = announcementProsecute
            this.enforcement = enforcement
            this.registerBeProsecute = registerBeProsecute
            this.registerProsecute = registerProsecute
          })
          .finally(() => {
            this.loading = false;
          });
      },
    }
  }

</script>
<style lang="scss" scoped>
  .onebox {
    .main {
      .bt {
        font-size: 24px;
        color: #333;
        font-weight: bold;
        margin-top: 40px;
      }

      .list_box {
        padding-top: 20px;
        padding-left: 28px;
        cursor: pointer;

        .list {
          margin-bottom: 20px;

          .title {
            font-size: 17px;
            color: #333;

          }

          .title:hover {
            color: rgb(26, 113, 243) !important;
          }

          .table {
            margin-top: 14px;
          }
        }
      }
    }
  }

</style>
